<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子函数</title>
</head>
<body>
<div id="app">
    <div ref="element">{{ info }}</div>
    <button v-on:click="info = 'Hello!'">更新</button>
</div>

<script type="module">
    import {createApp, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                // 在 Vue 中，如果定义了 ref 初始值为 null 的标识符，并且在 挂载位置由 ref 的属性值相同
                // Vue 会将两个进行关联，可以在 vue 中直接使用该元素。
                let element = ref(null)
                let info = ref("Hello, Vue!")

                console.group("setup 状态------------------------------------")
                console.log("%c%s", "color:grey", "element: " + element.value)
                console.log("%c%s", "color:grey", "info: " + info.value)
                console.groupEnd()


                onBeforeMount(
                    () => {
                        console.group("onBeforeMount 状态------------------------------------")
                        console.log("%c%s", "color:grey", "element: " + element.value)
                        console.log("%c%s", "color:grey", "info: " + info.value)
                        console.groupEnd()
                    }
                )

                onMounted(
                    () => {
                        console.group("onMounted 状态------------------------------------")
                        console.log("%c%s", "color:green", "element: " + element.value)
                        console.log("%c%s", "color:green", "info: " + info.value)
                        console.groupEnd()

                        console.log(element.value.innerText);
                    }
                )

                // html 元素 innerText 属性还是以前的值
                // 变量的值为新设置的内容
                onBeforeUpdate(
                    () => {
                        console.group("onBeforeUpdate 状态------------------------------------")
                        console.log("%c%s", "color:yellowgreen", "element: " + element.value)
                        console.log("%c%s", "color:yellowgreen", "info: " + info.value)
                        console.groupEnd()
                        console.log(element.value.innerText);
                    }
                )

                // html 元素 innerText 属性为新设置的值
                // 变量的值为新设置的内容
                onUpdated(
                    () => {
                        console.group("onUpdated 状态------------------------------------")
                        console.log("%c%s", "color:yellowgreen", "element: " + element.value)
                        console.log("%c%s", "color:yellowgreen", "info: " + info.value)
                        console.groupEnd()
                        console.log(element.value.innerText);
                    }
                )


                return {
                    element, info
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>